云胡的 blog

# 云胡的编程周报第 005 期

时间：2023/9/11 - 2023/9/17

# 一、点滴记录

  1. Intellij IDEA 中使用 shift + alt+ 鼠标左键可以多选光标。
  2. Element Plus 表格分页加载，切换时的等待期间可以用 v-loadding 加载提示，加载成功后关闭。
  3. 快速删除 node_modules
npm install rimraf -g # 安装 rimraf

rimraf node_modules # 进入项目目录后进行删除
1
2
3
  1. Linux 服务器刚登录进去的目录一般是用户目录，然后项目的位置在里面好几层，因此可以写一个简单的 sh 脚本直接进入到想去的位置。
#!/usr/bin/env bash

cd /root/library/library-web-vue/
1
2
3

运行： source 是内置命令，用途是读取文件中内容，并在当前 shell中逐条执行。

source xxx.sh
1

不可以使用 ./xxx.sh，会新建一个子 shell，然后在子 shell中运行文件内容。

  1. 之前通过 Python 爬取到的豆瓣图片存在数据库的步骤：
    • 先存在本地，然后手动上传到腾讯云 oss 上
    • 在腾讯云 oss 上导出豆瓣图片的 csv 文件
    • 读取 csv 文件，获取豆瓣图片在自己腾讯云 oss 上的链接，然后存到数据库中。

新的方式：

  • 先存到本地，然后通过腾讯云 sdk直接传到 oss 上并获取图片链接
  • 将图片链接存到数据库中
  1. 修复「云胡图书馆」字体大小改变后，进入下一章或者上一章字体又回到原来的大小。

rendition.next()可以进入下一章，但我在成功后的回调函数上改了最新的字体大小，发现依然没用，最后通过监听 rendered渲染事件，进行字体的更新，感觉应该在渲染前就要弄好字体，渲染后再弄最新的字体，实现方式不是很好，目前没有办法，先这样。

      rendition.on("rendered", function () {
        fontSize.value = parseInt(store.state.readFontSize, 10);
        if (rendition.themes) {
          rendition.themes.fontSize(fontSize.value + 'px');
        }
      });
1
2
3
4
5
6
  1. 给「云胡图书馆」加上 Element Plus 暗黑模式的时候，不知道为什么，老是无法成功，又调了几个小时，最后发现是 style上的 scoped 属性会导致样式私有化，不会引入 main.js 中配置的暗黑 css 主题，所以解决办法，就是手动引入。
<style scoped>
@import 'element-plus/theme-chalk/dark/css-vars.css';
</style>
1
2
3

正常模式：

bca946f56ce7e8a153aab771fa38d0a.png

暗黑模式：

82c0459f7b448c3cec96f81c21f55d4.png

  1. Vue3 配置移动端自适应，平常在写 css 的时候经常用 px 作为单位，那么什么是 px 呢？

像素，为影像显示的基本单位，译自英文“pixel”，pix是英语单词picture的常用简写，加上英语单词“元素”element，就得到pixel，故“像素”表示“画像元素”之意，有时亦被称为pel（picture element）。

每个这样的消息元素不是一个点或者一个方块，而是一个抽象的取样。仔细处理的话，一幅影像中的像素可以在任何尺度上看起来都不像分离的点或者方块；但是在很多情况下，它们采用点或者方块显示。

每个像素可有各自的颜色值，可采三原色显示，因而又分成红色、绿色、蓝色三种子像素（RGB色域），或者青色、洋红色（紫色）、黄色和黑色（CMYK色域，印刷行业以及打印机中常见）。

照片是一个个取样点的集合，在影像没有经过不正确的/有损的压缩或相机镜头合适的前提下，单位面积内的像素越多代表分辨率越高，所显示的影像就会接近于真实物体。

px 是一个绝对单位长度，比如设置了某个控件的长度是 10px，那么不管在 ipad，还是手机，还是电脑，它的长度就会被固定成 10px。

CSS3 的一个新单位叫做 rem，rem 为元素设定字体大小时，是相对单位长度，相对的是 HTML 根元素，因此只要不同的设备的 HTML 根元素的是根据屏幕宽度变化的，那么使用 rem 就可以做到自适应设备。

我们使用 postcss-pxtorem 库来实现自适应设备。

  • 安装 lib-flexible 和 postcss-pxtorem

    npm install lib-flexible --save-dev

npm install postcss-pxtorem@5.1.1 --save-dev
    1
    2
    3

  • 在 main.js 引入 lib-flexible

    import 'lib-flexible'
    1

  • 在 package.json 同级新建 postcss.config.cjs文件，填入以下内容

    // postcss.config.cjs
module.exports = {
    plugins: {
        'postcss-pxtorem': {
            rootValue: 37.5,
            propList: ['*'],
            exclude: "/node_modules", // 忽略包文件转换 rem
        }
    }
}
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10

重新运行即可发现自适应设备成功。

  1. 给「云胡图书馆」添加文本选中高亮功能

    监听选中事件，然后将其高亮。

          rendition.on('selected', function (cfiRange, contents) {
        rendition.annotations.highlight(
            cfiRange,
            {},
            function () {
            },
            null,
            {'fill': "#9370DB"}
        )

        book.getRange(cfiRange)
            .then(function (range) {
              selectText.value = range.toString();
            })
        contents.window.getSelection().removeAllRanges();
      });
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16

    高亮效果： image.png

  2. 给「云胡图书馆」添加分享书摘功能

    由于我个人特别喜欢「微信读书 app」 的分享书摘功能，于是就打算自己模仿一个，思路是先拿到用户选中的文本字符串，点击分享书摘按钮，然后通过 canvas 把文字画成一张图。

    image.png

    image.png

    先画背景渐变色，然后绘制最上面的图片，然后对字符串进行分行，最后再一行一行画出来，最后是画一条线和云胡图书馆标志。

    canvas 绘制还有问题，就是会很模糊，这是为什么呢？

    普通屏幕的像素（逻辑像素）和物理像素相等，比如 100px 逻辑像素绘制出 100px 物理像素，也就是我们看到的大小。

    但是在高分屏屏幕上，**window.devicePixelRatio**** 表示当前显示设备的物理像素分辨率与 **CSS** 像素分辨率之比，简称 dpr。如果 **window.devicePixelRatio 值为 2，那么设置 100px 逻辑像素，实际上用到的物理像素是 200px。

    不管是否为高分屏， canvas 中的单位 1逻辑像素，就是 1 物理像素，那么用 canvas 画出来的 100px 逻辑像素，显示出来的物理像素也是 100px。

    问题来了，如果 dpr 是 2，理论上要显示 200px，这时候浏览器使用了图像算法将另外 100px的像素值填充，这时候就出现了模糊。

    解决办法：

    假设 dpr 为 2，逻辑像素为 100px。

    • 通过 css 设置 canvas 元素的大小为逻辑像素大小。
    • 将 canvas 画布大小乘以 2 转换成实际像素（物理像素）大小，原来的 100 个像素是靠算法生成的会模糊，现在的 200 个像素全是原生的像素，这样就不会模糊。
    • 现在是画布的大小准备好了，不代表画上去就会直接乘 2，因此需要通过 scale 整体绘制时放大两倍。
      let canvas = document.getElementById("myCanvas");
if (canvas != null) {
    let ctx = canvas.getContext("2d");
    let ratio = 2;
        
    canvas.style.width = canvas.width + 'px';
    canvas.style.height = canvas.height + 'px';

    canvas.width = canvas.width * ratio;
    canvas.height = canvas.height * ratio;
    ctx.scale(ratio, ratio);
}
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      由于 canvas 画布大小变为原来 2 倍，所以原来有使用到 canvas 的大小要记得除于 2。

# 二、新发现

  1. Hatchful

    https://www.shopify.com/zh/tools/logo-maker (opens new window)

    免费 logo 制作器，「云胡图书馆」的 logo 就是这个网站制作的。

  2. epub.js

    https://github.com/futurepress/epub.js (opens new window)

    epubjs 是一个 npm 库，可以用来解析 epub 电子书，「云胡图书馆」的在线阅读功能就是通过这个库实现的。

  3. epub.js API 文档

    http://epubjs.org/documentation/0.3/ (opens new window)

  4. 前端面试题库

    https://vue3js.cn/interview/ (opens new window)

← 云胡的编程周报第 006 期 →